<template>
   <a-card ref="card" title="画板" class="card" style="width: 1200px;height: 600px;margin-top: 16px;">
      <v-stage 
        :config="state.config"
        @mousedown="handleMouseDown"
        @mousemove="handleMousemove"
        @mouseup="handleMouseup"
        class="stage"
      >
        <v-layer>
          <v-line 
          v-for="(line,index) in store.state.lines"
          :key="index"
          :config="line">
          </v-line>
        </v-layer>
      </v-stage>
    </a-card>
  </template>
  
  <script>
  import {  defineComponent,reactive} from 'vue';
  import {vStage,vLayer,vLine} from 'vue-konva'
  import { useStore } from 'vuex';
  export default defineComponent({
    components: {
      'v-stage':vStage,
      'v-layer':vLayer,
      'v-line':vLine,
    },
    setup(){
      const state = reactive({
        config:{
          width:1400,
          height:600,
        },
        stroke:'#ff0000',
        strokeWidth:5,
        startPainting:false,
      })
      const store = useStore();
      const handleMouseDown = (event) => {
        state.startPainting = true
        const newLine = {
          stroke:state.stroke,
          strokeWidth:state.strokeWidth,
          points:[event.evt.layerX,event.evt.layerY]
        }
        store.commit('pushNewLine',newLine)
        console.log('down');};
      const handleMousemove = (e) => {
        if(!state.startPainting) return
        const newLine = store.state.lines[store.state.lines.length-1]
        newLine.points = newLine.points.concat([e.evt.layerX,e.evt.layerY])
        store.commit('drawNewLine',newLine)
        console.log('move');};
      const handleMouseup = () => {
        state.startPainting = false
        console.log('up');};
      return {
        handleMouseDown,
        handleMousemove,
        handleMouseup,
        state,
        store,
        };
    },
  })
  </script>
  
  <style>
  .app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .card{
    margin-left: 100px;

  }
  .stage{
    border: 1px solid black;
  }
  .input {
    margin-right: 10px;
    width: 20px;
  }
  
  .button {
    margin-top: 10px;
    width: 100px;
  }
  </style>